﻿class Game
{
    constructor() { }

    maxNumber: number = 370;

    card: HTMLImageElement;
    cardID: HTMLElement;
    cardName: HTMLElement;
    inputID: HTMLInputElement;
    textEN: HTMLElement;
    textCN: HTMLElement;

    start()
    {
        this.card = document.getElementById('card') as HTMLImageElement;
        if (/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent))
        {
            this.card.style.width = '177px';
        }
        else
        {
            this.card.style.width = '354px';
        }

        this.cardID = document.getElementById('cardID');
        this.cardName = document.getElementById('cardName');
        this.textEN = document.getElementById('text-en');
        this.textCN = document.getElementById('text-cn');
        this.inputID = document.getElementById('inputID') as HTMLInputElement;
        this.inputID.onkeydown = (ev) =>
        {
            if (ev.keyCode == 13)//Enter
            {
                this.changeCard();
            }
        };

        var button = document.getElementById('view');
        button.onclick = () =>
        {
            this.changeCard();
        };
        
        this.changeCard();
    }

    changeCard()
    {
        if (this.card == null ||
            this.cardID == null ||
            this.cardName == null ||
            this.inputID == null ||
            this.textEN == null ||
            this.textCN == null)
        {
            return;
        }

        var str = this.inputID.value.replace(/\D/g,'');
        str = ('00' + str).slice(-3);
        var num = parseInt(str);
        if (0 < num && num <= this.maxNumber)
        {
            this.cardID.innerText = str;
            this.card.src = 'img/image' + str +'.png';
            this.cardName.innerText = document.getElementById('sjs-B' + num).innerText;
            this.textEN.innerText = document.getElementById('sjs-C' + num).innerText;
            this.textCN.innerText = document.getElementById('sjs-D' + num).innerText;
        }
    }
}

window.onload = () =>
{
    var game = new Game();
    game.start();
};
